import React from 'react'
import { View, StyleSheet } from 'react-native'
import Toast from 'react-native-root-toast'
import LottieView from 'lottie-react-native'
import RootSiblings from 'react-native-root-siblings'
import { ScaleS, HEIGHT, WIDTH, NAVIGATIONBAR_HEIGHT } from './ScreenUtil'

export const CommonToast = function (title) {
  return new Promise(resolve => {
    Toast.show(title, {
      position: Toast.positions.CENTER,
      shadow: false,
      hideOnPress: true,
      onHidden: () => {
        resolve()
      }
    })
  })
}
global.loading = null
export function ShowLoading () {
  if (global.loading) {
    return
  }
  global.loading = new RootSiblings(<LoadingMaskView />)
}
export function DismissLoading () {
  if (global.loading) {
    global.loading.destroy()
    global.loading = null
  }
}
export class LoadingMaskView extends React.PureComponent {
  render () {
    return (<View style={styles.load}>
      <LottieView style={{ width: 80, height: 80 }} source={require('../static/lottie_loading.json')} autoPlay loop />
    </View>
    )
  }
}

const styles = StyleSheet.create({
  load: {
    position: 'absolute',
    zIndex: 999999,
    top: NAVIGATIONBAR_HEIGHT,
    bottom: 0,
    left: 0,
    right: 0,
    paddingBottom: NAVIGATIONBAR_HEIGHT,
    justifyContent: 'center',
    alignItems: 'center'
  }
})
